<template>
  <div class="verify-content">
    <div class="filter-area">
      <span class="item-content">检核列表：</span>
      <el-select v-model="value" placeholder="在这里选择检核类型" size="small" @change="changeSelectType">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-refresh" size="small" @click="changeSelectType(value)">刷新</el-button>
    </div>

    <div class="verify-details">
      <div class="shop-card" v-for="(shop,index) in shopList" :key="index">
        <el-card :body-style="cardStyle"
                 v-clipboard:copy="shop['account_no__c']"
                 v-clipboard:success="copyShopCode"
                 v-clipboard:error="copyShopCodeError">
          <el-row justify="space-around">
            <el-col :span="12">
              <div class="shop-code">
                {{ shop["account_no__c"] }}
              </div>
            </el-col>
            <el-col :span="12">
              <div class="shop-name single-line">
                {{ shop["account_id__c__r"] }}
              </div>
            </el-col>
          </el-row>

          <el-row justify="space-around" style="margin-top: 4px">
            <el-col :span="8">
              <div class="shop-hasBaobei" style="text-align: left">
                已报备：
                <i :class="shop['field_6mKnJ__c']===true?'el-icon-success color-green':'el-icon-error color-red'"></i>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="shop-hasBaobei" style="text-align: center">
                需要检核：<i :class="shop['Manual_check_if__c']==='是'?'el-icon-success color-green':'el-icon-error color-red'"></i>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="shop-hasBaobei" style="text-align: right">
                举证达标：<i
                  :class="shop['qualified__c']==='true'?'el-icon-success color-green':'el-icon-error color-red'"></i>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </div>
      <div class="count-to">
        <div v-if="totalShopNum>0">
          <countTo style="color: #8f959e" prefix="共计 " suffix=" 家" :startVal='0' :endVal='totalShopNum' :duration='3000'></countTo>
        </div>
        <div v-else>
          <span style="color: #8f959e">暂无筛选结果</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getMemberIDByName} from "../tools";
import fxxkAPI, {api_getCheckInSearchResult, api_getEmployeeList} from "../api";
import countTo from 'vue-count-to'

const fk = new fxxkAPI();
export default {
  name: "verify-shop-list-view",
  components: {
    countTo
  },
  data: function () {
    return {
      fk,
      options: [{
        value: 'type_1',
        label: '已报备&未检核'
      }, {
        value: 'type_2',
        label: '举证未达标&未检核'
      }, {
        value: 'type_3',
        label: '全部剩余未检核'
      }],
      value: '',
      shopList: [],
      totalShopNum: 0,
      cardStyle:{
        padding: "10px"
      }
    }
  },
  computed: {},
  methods: {
    copyShopCode(){
      this.$message({
        showClose: true,
        message: '已复制网点编码到粘贴板！',
        type: 'success',
        duration: 1500
      });
    },
    copyShopCodeError(){
      this.$message({
        showClose: true,
        message: '复制网点编码失败！',
        type: 'error'
      });
    },
    getShopList() {

    },
    async changeSelectType(value) {
      let query = {}
      let month = "4"
      let apiName = "agreement_proof_summary__c"
      value = this.value
      if (value == "type_1") {//已报备&未检核
        query = {
          "limit": 10, "offset": 0,
          "filters": [
            {"field_name": "month__c", "field_values": [month], "operator": "EQ", "filterGroup": "1"},           //月份
            {"field_name": "field_6mKnJ__c", "field_values": [true], "operator": "EQ", "filterGroup": "1"},      //已报备
            {"field_name": "field_2B1Il__c", "field_values": ["24Ok5T62V"], "operator": "EQ", "filterGroup": "1"}//是否已检核
          ]
        }
      } else if (value == "type_2") {//举证未达标&未检核
        query = {
          "limit": 10, "offset": 0,
          "filters": [
            {"field_name": "month__c", "field_values": [month], "operator": "EQ", "filterGroup": "1"},           //月份
            {"field_name": "qualified__c", "field_values": ["false"], "operator": "EQ", "filterGroup": "1"},     ///举证是否达标
            {"field_name": "field_2B1Il__c", "field_values": ["24Ok5T62V"], "operator": "EQ", "filterGroup": "1"}//是否已检核
          ]
        }
      } else if (value == "type_3") {//全部剩余未检核
        query = {
          "limit": 10, "offset": 0,
          "filters": [
            {"field_name": "month__c", "field_values": ["4"], "operator": "EQ", "filterGroup": "1"},             //月份
            {"field_name": "Manual_check_if__c", "field_values": ["是"], "operator": "EQ", "filterGroup": "1"},  //是否需要人工检核
            {"field_name": "field_2B1Il__c", "field_values": ["24Ok5T62V"], "operator": "EQ", "filterGroup": "1"}//是否已检核
          ]
        }
      }else{
        return;
      }
      let ret = await this.fk.getSearchList(apiName, query);
      this.totalShopNum = ret["total"];
      this.shopList = ret["dataList"];
    }
  },
  mounted() {
  }
}
</script>

<style scoped lang="less">
.verify-content {
  min-width: 332px;
}

.filter-area {
  min-width: 332px;
  padding: 10px;
  z-index: 99;
  background-color: #FFFFFF;
  height: 28px;
  box-shadow: 0 3px 10px 0 rgb(31 35 41 / 4%);

  .item-content {
    line-height: 32px;
    font-weight: 600;
    min-width: 60px;
  }

  .item-desc {
    margin-left: 4px;
    font-size: 12px;
    color: #8f959e;
  }
}
.count-to{
  margin-top: 4vh;
  text-align: center;
}
.verify-content {
  min-width: 332px;
}

.verify-details {
  .shop-card {
    margin: 10px;
    .shop-name {
      font-weight: bold;
      text-align: right;
    }
    .shop-code {
      font-weight: bold;
    }
  }
}
</style>
